<script lang="ts" setup>
import RoleEdit from './components/roleEdit.vue' // 角色编辑模块
import Pagination from '../../components/pagination/index.vue' // 分页模块
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref, reactive, onBeforeMount } from 'vue'
import { getUserList, deleteUser } from '@/api/user'
const editDrawer = ref(false) // 控制编辑抽屉的显示
const editUser = ref({}) // 编辑的用户
const loading = ref(false) // 控制加载状态
const baseUrl = import.meta.env.VITE_BASE_API // import.meta.env.VITE_BASE_API   引入全局变量

// 分页类型
interface IngetUserListFunction {
  pageIndex: number
  pageSize: number
}

// 分页
const PaginationConfig = reactive({
  currentPage: ref(1),
  total: ref(10)
})

// 表格数据
let tableData = ref([])
// 初始化加载
onBeforeMount(async () => {
  getUserListFun({ pageIndex: PaginationConfig.currentPage - 0, pageSize: 10 })
})

// 获取数据
const getUserListFun = async (params: IngetUserListFunction) => {
  loading.value = true
  const res = await getUserList(params)
  loading.value = false
  tableData.value = res.data.rows
  PaginationConfig.total = res.data.count - 0
}

// 打开弹窗
const openEditDrawer = (userInfo: any) => {
  editUser.value = JSON.parse(JSON.stringify(userInfo))
  editDrawer.value = true
}
// 关闭
const closeEditDrawer = (flag: boolean) => {
  // 若需要刷新数据  则 flag 为 true
  if (flag) {
    getUserListFun({ pageIndex: PaginationConfig.currentPage - 0, pageSize: 10 })
  }
  editDrawer.value = false
}
// 删除角色
const deleteRole = async (id: number) => {
  if (id) {
    const res = await deleteUser({ id })
    if (res.errcode === 0) {
      getUserListFun({ pageIndex: PaginationConfig.currentPage - 0, pageSize: 10 })
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg || '网络错误')
    }
  }
}

// 分页改变
const currentChange = (page: number) => {
  PaginationConfig.currentPage = page
  getUserListFun({ pageIndex: page - 0, pageSize: 10 })
}
</script>
<!-- 角色配置 -->
<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>人员管理</span>
          <!-- <el-button class="button" type="text">添加人员</el-button> -->
        </div>
      </template>
      <el-table :data="tableData" border style="width: 100%" size="small" v-loading="loading">
        <el-table-column prop="user_phone" label="手机号" />
        <el-table-column prop="user_name" label="用户名" />
        <el-table-column prop="user_nickname" label="昵称" />
        <el-table-column prop="user_avatar" label="头像">
          <template #default="scope">
            <img :src="baseUrl + scope.row.user_avatar" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="user_email" />
        <el-table-column prop="address" label="角色">
          <template #default="scope">
            <!--   :type="scope.row.tag === 'Home' ? '' : 'success'" -->
            <el-tag :type="scope.row.user_role === 1 ? 'success' : 'warning'" disable-transitions>{{
              scope.row.user_role === 1 ? '管理员' : '普通用户'
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" size="small" :icon="Edit" circle @click="openEditDrawer(scope.row)" />
            <el-popconfirm title="确定要删除吗？" @confirm="deleteRole(scope.row.id)">
              <template #reference>
                <el-button type="danger" size="small" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        fixed="right"
        @currentChange="currentChange"
        :currentPage="PaginationConfig.currentPage"
        :total="PaginationConfig.total"
      />
    </el-card>
    <RoleEdit :editUser="editUser" :visibleDrawer="editDrawer" @closeDrawer="closeEditDrawer" />
  </div>
</template>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>
